<template>
    <div>
        <!-- <h4>部门管理</h4> -->
        <!-- 一键清空input输入框： clearable -->
        <!-- 内容超过行则……：show-overflow-tooltip -->
        <form class="Topfrom">
            <label class="labelYs">部门名称</label>
            <el-input v-model="deptName" clearable class="TopInput" placeholder="请输入部门名称" />
            <label class="labelYs">状态</label>
            <el-select v-model="status" clearable placeholder="部门状态" class="TopInput">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button :icon="Search" type="primary" class="SearchButton" @click="loadData">搜素</el-button>
        </form>
        <div class="TopbuttonDiv">
             <el-button type="primary" plain class="Topbutton" v-perm:slm:slm_structure:dept:insert="insert">
            <el-icon>
                <Plus />
            </el-icon>新增</el-button>
        </div>

        <el-table :data="findDepts" style="width: 100%" row-key="deptId"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column label="部门名称" prop="deptName" align="center" />
            <el-table-column label="排序" prop="orderNum" align="center" />
            <el-table-column label="状态" prop="status" align="center">
                <template v-slot="scope">
                    <span v-if="scope.row.status == '0'">正常</span>
                    <span v-if="scope.row.status == '1'">停用</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center" />
            <el-table-column label="操作" align="center">
                <!-- text:按钮去除边框 -->
                <template #default="scope">
                    <el-button :row="scope.row" text type="primary" v-perm:slm:slm_structure:dept:update="update">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        修改</el-button>
                    <el-button :row="scope.row" text type="primary" v-perm:slm:slm_structure:dept:insertT="insertT">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        新增</el-button>
                    <el-button v-if="scope.row.deptId != 1" :row="scope.row" text type="primary">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :destroy-on-close="true" :title="title" v-model="visible">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router'
import request from '@/api/request'
//搜素按钮图标
import { Search } from '@element-plus/icons-vue'
//input输入框
const deptName = ref('')
//下拉框 (状态)
const status = ref('')

const options = [
    {
        value: '0',
        label: '正常'
    },
    {
        value: '1',
        label: '停用'
    }
]
let visible = ref(false)
let title = ref("")
let findDepts = ref([])
let data = ref({})

let loadData = () => {
    // console.log(status)
    // console.log(deptName.value)
    request({
        url: '/slm/dept/find',
        method: 'get',
        params: {
            deptName: deptName.value,
            status: status.value ? status.value : ""
        }
        // ,
        // headers: "Content-Type: application/json"
    }).then(resp => {
        console.log(resp.data)
        findDepts.value = resp.data
    })
}

let insert = (menu) => {
    title.value = menu.menuName
    visible.value = true;
    // console.log(menu)
    router.push(menu.path)
}

let insertT = (menu, row) => {
    title.value = menu.menuName
    visible.value = true;
    data.value = row
    console.log(row)
    router.push(menu.path)
}

let update = (menu, row) => {
    title.value = menu.menuName
    visible.value = true;
    data.value = row
    // console.log(row)
    router.push(menu.path)
}

let remove = (menu, row) => {
    //     // console.log(row)
    //     request({
    //         url: 'hris/pm/delete/' + row.rankNo,
    //         method: 'delete'
    //     }).then(resp => {
    //         loadData();
    //     })
}
//关闭窗口刷新（立即按钮）
let close = () => {
    visible.value = false;
    loadData();
}

loadData();
</script>

<style scoped>
/* 表格上方label */
.labelYs {
    font-size: 14px;
    font-weight: 700;
    color: #606266;
}
/* 表格上方输入框 */
.TopInput {
    width: 205px;
    padding: 0px 0px 0px 12px;
    margin-top: 18px;
    margin-bottom: 18px;
    margin-right: 12px;
}
/* 金额输入框 */
.MonmyInput {
    width: 120px;
    padding-left: 12px;
}
/* 搜素按钮 */
.SearchButton {
    margin: 0px 0px 0px 12px;
}
/* 表格上方按钮 */
.Topbutton {
    margin: 0px 12px 0px 0px;
}
/* 包按钮的div */
.TopbuttonDiv {
    margin-bottom: 8px;
}

.Topfrom {
    /* display: inline-block; */
    margin-bottom: 18px;
}
/* 表单 */
.el-table {
    background-color: #f8f8f9;
}
</style>
